<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按钮过渡</title>
		<style>
			body{width: 100%;height: 100%;background: #C1EBFF;text-align: center;}
			button{
				border: none;  /* 去掉边框*/
				height: 150px; /* 按钮高度*/
				width: 300px;  /* 按钮宽度*/
				background: black;  /* 按钮背景颜色*/
				color: white;    /* 字体颜色*/
				font-size: 45px; /* 字体大小*/
				transition: all 2s linear; 
				position: relative;
			}
			button:hover{  /* 鼠标悬停在按钮上执行操作*/
				background: white; /* 背景颜色*/
				color: #1AAB8A;   /* 字体颜色*/
			}
			button:before{  /* 在按钮儿子中添加一个老大*/
				content: '';
				background: #1AAB8A;
				height: 5px;
				width: 0;
				position: absolute;
				right: 0;
				top: 0;
				transition: all 2s linear; 
			}
			button:after{  /* 在按钮儿子中添加一个小弟*/
				content: '';
				background: #1AAB8A;
				height: 5px;
				width: 0;
				position: absolute;
				left: 0;
				bottom: 0;
				transition: all 2s linear; 
			}
			button:hover:before,button:hover:after{
				width: 100%;
			}
		</style>
	</head>
	<body>
		<button>Hover me !</button>
	</body>
</html>
